import { Popover } from 'antd'

/**
 * 路由中英文模板气泡显示
 * - 直接显示标题，气泡显示标题与描述
 * - 相关字段名为 templateCn、templateEn
 */
export const RouteTplShow = Object.assign(
  ({ value }: { value: string | null | undefined }) => {
    if (!value) return
    const { title, desc } = RouteTplShow.splitValue(value)
    return (
      <Popover overlayStyle={{ maxWidth: 360, maxHeight: 200 }} title={title} content={desc}>
        {title}
      </Popover>
    )
  },
  {
    /** 分离出标题与描述 */
    splitValue: (value: string | null | undefined) => {
      const [title, ...descArr] = value?.trim().split(/\s*\n+\s*/) || ['']
      return {
        title,
        desc: descArr.join('\n'),
      }
    },
  },
)
